<template>
<div class="list">
<table>
  <tr>
    <th style="width: 150px;">收藏编号</th>
    <th style="width: 100px;">商家编号</th>
    <th style="width: 200px;">评价编号</th>
    <th style="width: 100px;">距离</th>
    <th style="width: 150px;">状态</th>
    <th style="width: 330px;">店铺名</th>
    <th style="width: 330px;">店铺头像</th>
    <th style="width: 330px;">评价分数</th>
    <th style="width: 100px;">操作</th>
  </tr>
  <tr v-for="(item,index) in tableData" :key="index">
    <td v-text="item.id"></td>
    <td v-text="item.shop_id"></td>
    <td v-text="item.evaluation_id"></td>
    <td v-text="item.distance"></td>
    <td v-text="item.is_delete"></td>
    <td v-text="item.shop_name"></td>
    <td>
      <el-avatar :size="100">
        <el-image :src="item.head_portrait"
                  style="width: 100%; height: 100%;"></el-image>
      </el-avatar>
    </td>
    <td v-text="item.evaluation_score"></td>
    <td @click="deleteshoucang(item.id)">删除</td>
  </tr>
</table>
</div>


</template>
<script>
import {ElMessage} from "element-plus";
export default {
  name: 'Collection',
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.listShop()
  },
  methods: {
    listShop(){
      this.$axios.get("/collection/list")
          .then(res => {
            this.tableData = res.list;
          })
    },
    deleteshoucang(cid){
      this.$axios.delete('collection/delete',{
        params: {
          id:cid
        }
      }).then(data => {
        let result = data.dishesID;
        if(result) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          this.listShop();
          //刷新页面
          location.reload();
        }
      })
    }
  }
}
</script>
<style>
.common-layout .el-main {
  line-height: 40px;
}
</style>